<link href="<?php $this->path('css/jquery.cleditor.css');?>" rel="stylesheet" media="all">
<link href="<?php $this->path('css/jquery.tagsinput.css');?>" rel="stylesheet" media="all">
<script type="text/javascript" src="<?php $this->path('js/jquery.tagsinput.js');?>"></script>
<script type="text/javascript" src="<?php $this->path('js/jquery.validate.min.js');?>"></script>
<script type="text/javascript" src="<?php $this->path('js/jquery.barcode.min.js');?>"></script>

<div id="add-new-unit" title="New Measurement">
	<form class="form_style registed" action="post" style="margin-top: 0px;">
    	<input type="text" name="name" style="width:95%;width: 90%;margin-bottom: 10px;" value="" placeholder="Add New Measurement" />
    	<input type="text" name="qty" style="width:95%;width: 90%;margin-bottom: 10px;" value="" placeholder="Default Quantity" />
    	<input type="submit" value="Add" />
		<div class="clear"></div>
	</form>
</div>
<style>
form label.error{ margin: 0px;display:inline-block;text-indent:5px; }
#dialog-form{ overflow-x:hidden !important; }
</style>
<div class="form_style registed" style="margin: 10px;padding-bottom: 25px;">
	<div class="grid_3" style="width:95%">
		<form id="add-new-item" onsubmit="return false;" >
    		<input type="button" style="float:right;margin-right:-3px;margin-left:10px;margin-top: -15px;margin-bottom: 5px;" value="Next" />
    		<input type="submit" style="float:right;margin-right:-3px;margin-left:10px;margin-top: -15px;margin-bottom: 5px;" value="Add" />
    		<input type="button" style="float:right;margin-right:-3px;margin-top: -15px;margin-bottom: 5px;" value="Back" />
    		<div class="clear"></div>
		</form>
		<hr /><br/>
		<div class="clear"></div>
		<div class="step">
			<form id="first-step" ok="0">
        		<?php $this->render2(CP_BAS . 'pos/inventory/category/index.php'); ?>
    			<br/>
    			<hr />
    			<br/>
        		<strong>Product Name</strong><br/>
        		<input type="text" name="product" class="" value="" placeholder="Product Name..."/><br/><br/>
    			
    			<strong>Tag</strong>
    			<input type="text" name="tag" class="" value="" placeholder="Add a tag..."/><br/>
    					
        		<strong>Description</strong><sup class="surely" style="font-size:x-small;">Note: HTML is not supported!</sup><br/>
        		<textarea id="editor" name="description" style="width: 97%;height: 150px;color: #444 !important;
            font:normal 12px/18px Segoeui, Arial, Verdana, serif !important;resize:none;"></textarea><br/>
			</form>
			<div class="clear"></div>
		</div>
		<!-- <div class="step">
			<strong>Upload Image</strong>
			<div class="clear"></div>
			<div style="float:left;border-right:1px dashed #c0c0c0">
        		<input type="file" value="Upload" /><br />
        		<a>
        			<img src="images/produkt_slid.png"  style="width: 294px;height: 294px;" title="" alt=""/>
        		</a>
			</div>
			<div style="float:right;width:220px">
        		<input type="file" value="Upload" /><br />
        		<a>
        			<img src="images/produkt_slid.png"  style="width: 150px;height: 150px;" title="" alt=""/>
        		</a>
			</div>
		</div> -->
		<div class="step">
			<form id="last-step" ok="0">
				<label for="final" class="error" style="z-index: 1;position: absolute;left: 30px;top: 45px;display:none;"></label>
        		<?php $this->render2(CP_BAS . 'pos/inventory/supplier/index.php'); ?>
    			<br />
    			<hr />
    			<div class="clear" style="height:5px;"></div>
    			<strong>Reorder Level</strong>&emsp;
				<input type="text" value="" placeholder="per unit" name="reorder">
    			<div class="clear" style="height:10px;"></div>
    			<strong>Reorder Qty&nbsp;&nbsp;</strong>&emsp;
				<input type="text" value="" placeholder="per unit" name="reorderq">
    			<hr style="margin-top: 5px;" />
    			<br />
    			<strong>Pricing</strong><br />
    			<table style="border:0px">
    				<tr>
    					<td class="ui-text-center">Supplier Price</td>
    					<td style="width:15px"></td>
    					<td class="ui-text-center">Markup (%)</td>
    					<td style="width:15px"></td>
    					<td class="ui-text-center">Whole Sale Price</td>
    				</tr>
    				<tr>
    					<td><input name="wholesale_price2"  type="text" style="width: 80%;margin-left: auto !important;margin-right: auto !important;display: block;" value="0.00" id="sc" /></td>
    					<td class="ui-text-center">X</td>
    					<td class="ui-text-center">10</td>
    					<td class="ui-text-center">=</td>
    					<td><input name="wholesale_price" type="text" style="width: 80%;margin-left: auto !important;margin-right: auto !important;display: block;" value="0.00" id="wsp" /></td>
    				</tr>
    				<tr>
    					<td class="ui-text-center">Supplier Price</td>
    					<td style="width:15px"></td>
    					<td class="ui-text-center">Markup (%)</td>
    					<td style="width:15px"></td>
    					<td class="ui-text-center">Retail Sale Price</td>
    				</tr>
    				<tr>
    					<td><input name="retail_price2"  type="text" style="width: 80%;margin-left: auto !important;margin-right: auto !important;display: block;" value="0.00" id="sc2" /></td>
    					<td class="ui-text-center">X</td>
    					<td class="ui-text-center">25</td>
    					<td class="ui-text-center">=</td>
    					<td><input name="retail_price" type="text" style="width: 80%;margin-left: auto !important;margin-right: auto !important;display: block;" value="0.00" id="rp" /></td>
    				</tr>
    			</table>
    			<br />
    			<hr />
    			<br />
    			<strong>Misc</strong><br />
				<table style="border:0px;margin-bottom:-40px">
    				<tr>
    					<td class="ui-text-right" style="width: 80px;padding-right: 10px;">Barcode :</td>
    					<td colspan="2">
						<input id="barcode-input" maxlength="8" type="text" /></td>
						<div id="barcode-preview" style="position:absolute;right:150px"></div></td>
    				</tr>
					<tr>
						<td>&nbsp;</td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</form>
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>

<script type="text/javascript" src="<?php $this->path('js/jquery.form.js');?>"></script>
<div id="dialog-upload" title="Upload Image">
	<div id="upload_form">
    	<strong>Format allowed jpg, png, gif and bmp.</strong>
    	<form id="uploading" method="post" enctype="multipart/form-data" class="form_style registed" action="?module=photo" style="margin-top: 0px;height: 180px;" >
    		<strong>Item Photo(500x500):</strong><br />
        	<input type="file" name="image[]" style="float: left;border: 1px solid #e0e0e0;padding: 5px;width: 98%;height:23px;"> 
    		<br /><br /><br />
    		<strong>Item Thumbnail(150x150):</strong><br />
        	<input type="file" name="image[]" style="float: left;border: 1px solid #e0e0e0;padding: 5px;width: 98%;height:23px;"> 
        	<div id="pr" style="width: 355px;display: inline-block;border: 1px solid #e0e0e0;margin: 18px;float:left;position: relative;">  
        		<div class="pr_bar ease" style="width:0px;background-color:#59b7c2;position:absolute;">&nbsp;</div>  
        		<div class="pr_text" align="center" style="position:relative;">0%</div>  
        	</div>   
    		<input type="hidden" value="1" name="uploading" />
    		<input type="hidden" value="0" name="id" />
        	<input type="submit" value="Upload" style="float:left;margin: 10px;">
    	</form> 
	</div>
	<div id="upload_display" style="display:none;">
		<strong>Item Image</strong>
		<div style="width:500px; height:500px">
			<img class="ima" name="photo" style="max-height:500px;max-width:500px;height:inherit;width:inherit;" src="" alt="" title="" />
		</div>
		
		<div style="width:150px; height:180px;position:absolute;right:10px;bottom:0px">
			<strong>Item Thumbnail</strong>
			<img class="ima" name="thumbnail" style="max-height:150px;max-width:150px;border:1px solid #c0c0c0" src="" alt="" title="" />
		</div>
	</div>
	<div class="clearfix"></div>
</div>
<script>
var step = 0;
var stop = true;
var i = 0;

$('.step, #add-new-item input[type=button], #add-new-item input[type=submit]').hide();
$('.step').each(function(){
	if(!(i++)){
		$(this).fadeIn();
	}
});
$('#barcode-input').keydown(function(e) {
	if ((e.which || e.keyCode) == 13){
		$("#barcode-preview").barcode($(this).val(), "int25", {barHeight:30});  
	}
}).change(function(){$("#barcode-preview").barcode($(this).val(), "int25", {barHeight:30});});
$('#add-new-unit form').validate({
    rules: {
    	qty: {
       		required: true,
			digits: true
       	},
		name: {
       		required: true
		}
	}
});
$('#add-new-unit form').submit(function(e){
	e.preventDefault();
	var name = $(this).find('input[name=name]').val();
	var qty = $(this).find('input[name=qty]').val();
	if( !name.length || !qty.length || isNaN(qty) )
		return;
	$.post('?module=pos&action=inventory&action2=add&ajax=true', {name:name,qty:qty,unitadd:1}, function(data){
		console.log(data);
		if(data != 0){
    		$('#qty-measurement').append(
    			'<option value="' + data.trim() + '" per="' + qty + '">' + name + '</option>'
    		);
			$('#add-new-unit form')[0].reset();
			$('#add-new-unit').dialog('close');
		}else{
			alert('Already Exist!');
		}
	});
});
$('#add-new-unit').dialog({
    height: 250,
    width: 300,
    resizable: false,
    modal: true,
	autoOpen: false
});
$('#dialog-upload').dialog({
    height: 320,
    width: 600,
    resizable: false,
    modal: true,
	autoOpen: false,
	close: function(ev, ui) { $(this).dialog('destroy').remove();reload_listing(); }
});
/*var for_supply = function(){
    $( "#last-step" ).submit(function(e){e.preventDefault();}).validate({
    	submitHandler: function(form) {
    		process_sup();
			for_last();
    	},
    	rules: {
    		sup_qty: {
        		required: true
        	},
        	sup_per: {
        		required: true,
        		min: 1
        	},
        	cost: {
        		required: true,
        		min: 1
        	},
        	edate: {
        		required: true,
        		min: 1
        	}
    	}
    });
};*/
var for_last = function(){
    $( "#last-step" ).submit(function(e){e.preventDefault();}).validate({
    	submitHandler: function(form) {
    		//step = 4;
			step = 3;
        	$('#add-new-item').trigger('submit');
    	},
    	rules: {
    		retail_price2: {
    			required: true,
    			min: 1
    		},
    		wholesale_price2: {
    			required: true,
    			min: 1
    		},
			reorder: {
    			required: true,
    			min: 1
			},
			reorderq: {
    			required: true,
    			min: 1
			}
    	}
    });
};
for_last();
$( "#first-step" ).submit(function(e){e.preventDefault();}).validate({
	submitHandler: function(form) {
		if(!$('#category-sel').val()){
			$('label[for=categ]').fadeIn();
			return false;
		}
		step = 1;
		$('#add-new-item').trigger('submit');
	},
	rules: {
		product: {
			required: true
		},
		category: {
			required: true
		},
		description: {
			required: true,
			minlength: 10
		}
	}
});
$('#add-new-item input[value=Next]').show();
$('#add-new-item input[value=Next]').click(function(e){
	if( !step)
		$('#first-step').submit();
	else{
		step++
		$('#add-new-item').trigger('submit');
	}
});
$('#add-new-item input[value=Back]').click(function(){
	//if(step == 3) step = 2;
	if(step == 2) step = 1;
	step--;
	$('#add-new-item').trigger('submit');
});
$('#add-new-item input[type=submit]').click(function(){
	$('#last-step').submit();
	//step = 3;
	step = 2;
	if($('#last-step').attr('ok') == 1){
		$('#add-new-item').trigger('submit');
	}
});
$('#add-new-item').submit(function() {
	
	//if(step == 3 && $('#last-step').attr('ok') == 0){
	if(step == 2 && $('#last-step').attr('ok') == 0){
		return false;
	}
	//if( step < 3 ){
	if( step < 2 ){
		setTimeout(function(){makestep();},100);
		return false;
	}
	var name = $(this).parent().find('input[name=product]').val();
	var desc = $(this).parent().find('textarea').val();
	var id = $('#supplier-listing').val();
	var barcode = $('#barcode-input').val();
    //var name = $('#supplier-listing option[value="' + id + '"]').text();
	
    /*var cost = $('#supplier-option').find('input[name=cost]').val();
    var unit = $('#qty-measurement').find('option[value='+$('#qty-measurement').val()+']').text();
	var per = $('#supplier-option').find('input[name=sup_per]').val();
    var edate = $('#supplier-option').find('input[name=edate]').val();*/
	var suppliers = new Array();
	var s = 0;
	$('#supplier-lists tr').each(function(){
		var supp = new Array();
    	supp[0] = $(this).attr('sid');
    	supp[1] = $(this).attr('unit');
    	supp[2] = $(this).attr('per');
    	supp[3] = $(this).attr('cost');
    	suppliers[s++] = supp;
	});
	if(!s){
		alert("Select Supplier.");
		return false;
	}
    var wholesale = $('#last-step').find('input[name=wholesale_price]').val();
    var retail = $('#last-step').find('input[name=retail_price]').val();
	var category = $('#cat-selected').attr('icid');//$('#category-sel').val();
	var tag = $(this).parent().find('input[name=tag]').val();
	var sid = $('#supplier-listing').val();
    var reorder = $('#last-step').find('input[name=reorder]').val();
    var reorderq = $('#last-step').find('input[name=reorderq]').val();
	$.post('?module=pos&action=inventory&action2=add&ajax=true',
	{
    	category:category,
    	name:name,
    	desc:desc,
    	tag:tag,
    	whole_sale:wholesale,
    	retail:retail,
    	suppliers:suppliers,
    	barcode:barcode,
		reorder:reorder,
		reorderq:reorderq
	}
	,function(data){
		if(data.indexOf("id") == 0){
			//$('#item-search').val(name);
			if(confirm("Upload Item Image?")){
				$('#dialog-upload input[name=id]').val(data.replace('id',''));
				$('#upload_display div img.ima').each(function(){
					$(this).attr('src', '?module=photo&get=' + $(this).attr('name') + '&from=item_details&id='+data.replace('id','')+'&name=iid&ajax=true');
				});
				$('#dialog-upload').dialog('open');
			}
			reload_listing(name);
			$('#dialog-form').dialog('close');
        	$('#dialog-form input[type=text], #dialog-form textarea').each(function(){
            	$(this).val('');
        	});
			$( '#dl-menu' ).dlmenu("closeMenu");
			set_notif('success', "New <a href='#" + id + "' title=" + name + ">item</a> added!", '', 0);
			set_notif('warning', "<strong>" + name + "</strong> has low stock. <a class='toast-close reorder-item' iid='" + data.replace('id','') + "' href='#'>Click</a> to order.", "if(typeof refunc_items == 'function'){refunc_items();}", 1);
		}else{
			if(data.length < 50){
				$('label[for=final]').text(data).fadeIn();
			}else{
				set_notif('error', "Some error occurs", '', 0);
				console.log(data);
			}
		}
	});
	return false;
});
function makestep(){
	var x = 0;
	$('.step').each(function(){
		$(this).hide();
		if( step == x )
			$(this).fadeIn('slow');
		x++;
	});
	switch( step ){
		case 1:
			$('#add-new-item input[type=submit]').show();
			$('#add-new-item input[value=Back]').show();
			$('#add-new-item input[value=Next]').hide();
			break;
		case 2:
			$('#add-new-item input[type=submit]').hide();
			$('#add-new-item input[type=button]').show();
			break;
		case 0:
			$('#add-new-item input[type=submit]').hide();
			$('#add-new-item input[type=button]').show();
			$('#add-new-item input[value=Back]').hide();
			break;
	}
}
$('#qty-measurement').change(function(){
	var def = $(this).find('option[value='+$(this).val()+']').attr('per');
	var flag = $(this).find('option[value='+$(this).val()+']').attr('flag');
	$('#qty-per-pc').val(def).attr('flag',flag).attr('def',def);
	if($(this).val() == 0){
		$('#del-unit').hide();
	}else{
		$('#del-unit').fadeIn();		
	}
});
$('#del-unit').click(function(e){
	e.preventDefault();
	var name = $('#qty-measurement').find('option[value='+$('#qty-measurement').val()+']').text();
	$.post('?module=pos&action=inventory&action2=add&ajax=true',{name:name,remunit:1},function(data){
		console.log(data);
    	$('#qty-measurement').find('option[value='+$('#qty-measurement').val()+']').remove();
    	$('#qty-measurement').val(0);
    	$('#qty-per-pc').val(0).attr('flag',0).attr('def',0);
    	$('#del-unit').hide();
	});
});
$('#qty-per-pc').change(function(e){
	e.preventDefault();
	if($(this).attr('flag') == 1){
		$(this).val($(this).attr('def'));
	}
});
$('input[name=tag]').tagsInput({'width':'auto', 'interactive':true, 'maxChars' : 25});
img_fix();
var comp = function(){
	var x1 = $('#sc');
	var x2 = $('#sc2');
	var x3 = $('#wsp');
	var x4 = $('#rp');
	var r = x1.val() * 110 / 100;
	var r2 = x2.val() * 125 / 100;
	
	if( isNaN(r) ){
		x3.val(0);
		x1.val(0);
	}else
		x3.val(formatCurrency(r));
		
	if( isNaN(r2) ){
		x4.val(0);
		x2.val(0);
	}else
		x4.val(formatCurrency(r2));
}

$('#sc').change(function(){comp()}).blur(function(){$(this).val(formatCurrency($(this).val()))});
$('#sc2').change(function(){comp()}).blur(function(){$(this).val(formatCurrency($(this).val()))});
$('#wsp').change(function(){comp()}).blur(function(){$(this).val(formatCurrency($(this).val()))});
$('#rp').change(function(){comp()}).blur(function(){$(this).val(formatCurrency($(this).val()))});

$('#uploading').ajaxForm({
    beforeSend: function() {
        var percentVal = '0%';
        $('.pr_bar').width(percentVal)
        $('.pr_text').html(percentVal);
		$('#uploading input[type=submit]').blur().css('background', '#cacaca').val('Please wait...');
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        $('.pr_bar').width(percentVal)
        $('.pr_text').html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        $('.pr_bar').width(percentVal)
        $('.pr_text').html(percentVal);
    },
	complete: function(xhr) {
		console.log(xhr.responseText);
		if(xhr.responseText != ""){
            var percentVal = '0%';
            $('.pr_bar').width(percentVal)
            $('.pr_text').html(percentVal);
			alert(xhr.responseText);
			$('#uploading input[type=submit]').blur().css('background', '#59b7c2').val('Upload');
		}else{
			setTimeout(function(){
    			$('#upload_form').hide();
				$('#upload_display img').each(function(){
					$(this).attr('src', $(this).attr('src')+'?'+Math.random());
				});
				$('#upload_display').fadeIn('slow',function(){ 
					$('#dialog-upload').css('height','auto');
					$('#dialog-upload').parent().css('top','5px');
				});
			}, 2000);
		}
	}
}); 
</script>   